<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./css/welcome.css">
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  </body>
  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>
  <div class="big-box layui-fluid">
    <!-- 第一排 -->
    <div class="first-row layui-row layui-col-space1">
      <!-- 第一排第一个盒子 -->
      <div class="first layui-col-md3">
        <div class="spannel">
          <img src="./images/admin-icon.5c6774a8.png" alt="">
          <p>管理员用户
            <br />
            <span id="admin_user"></span>
          </p>
        </div>
      </div>
      <!-- 第一排第二个盒子 -->
      <div class="second layui-col-md3">
        <div class="spannel">
          <img src="./images/user-icon.4530a2a5.png" alt="">
          <p>平台注册用户
            <br />
            <span id="reg_user">364名</span>
          </p>
        </div>
      </div>
      <!-- 第一排第三个盒子 -->
      <div class="three layui-col-md3">
        <div class="spannel">
          <img src="./images/下载.png" alt="">
          <p>平台文章总数<br />
            <span id="art_count"></span>
          </p>
        </div>
      </div>
      <!-- 第一排第四个盒子 -->
      <div class="four layui-col-md3">
        <div class="spannel">
          <img src="./images/下载 2.png" alt="">
          <p><span id="banner_count"></span><br />
            <span id="banner_img"></span>
          </p>
        </div>
      </div>
    </div>

    <!-- 第二排 -->
    <div class="second-row layui-row layui-col-space5">
      <!-- 第二排第一个盒子 -->
      <div class="first layui-col-md4">
        <div class="box1">
          <div class="box2">
            <div class="grid-demo grid-demo-bg1">最新注册新用户</div>
          </div>

          <div class="box">
            <!-- <div class="box-box">
              <div>18055064707&nbsp;&nbsp;&nbsp;&nbsp;女</div>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 第二排第二个盒子 -->
      <div class="first layui-col-md4">
        <div class="box1">
          <div class="box2">
            <div class="grid-demo grid-demo-bg1">点赞文章排行</div>
          </div>

          <div class="box" id="News">
            <!-- <div class="box-box">
              <div class="info">全球身材最贵的女人，翘臀3.5亿美元，美腿10亿美元……你们感受下！ </div>
            </div> -->

          </div>
        </div>
      </div>

      <!-- 第二排第三个盒子 -->
      <div class="first layui-col-md4">
        <div class="box1">
          <div class="box2">
            <div class="grid-demo grid-demo-bg1">用户性别分析
            </div>
            <div id="Pie" style="width: 380px;height: 280px;"></div>
          </div>
        </div>
      </div>

    </div>

    <!-- 第三排 -->
    <div class="three">
      <div class="three-title">各分类文章发布数量</div>
      <div id="Bar" style="width: 1210px;height: 320px;"></div>

    </div>
  </div>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/ajaxBase.js"></script>
  <script src="./lib/layui/echarts.min.js"></script>
  <script>

    getData()
    async function getData() {
      const res = await axios.get('/index/baseInfo')
      // console.log(res);
      const userGender = res.data.data.user  //拿到用户性别数据 ，作为实参传出去
      const allCate = res.data.data.all_cate  //拿到分类文章数据，作为实参传出去

      //渲染第一排
      $('#admin_user').html(`${res.data.data.admin_num}名`)
      $('#banner_count').html(`广告位${res.data.data.advpos_num}个`)
      $('#banner_img').html(`广告图${res.data.data.advimg_num}张`)
      $('#art_count').html(`${res.data.data.article_num}篇`)
      $('#reg_user').html(`${res.data.data.user.total}名`)


      // 渲染新用户
      const newUser = res.data.data.new_user
      // console.log(newUser);
      const str = newUser.map(item => {
        return `<div class="box-box">
                    <div>${item.username}&nbsp;&nbsp;&nbsp;&nbsp;
                      ${item.sex = item.sex === 0 ? '女' : '男'}
                      </div>
              </div>`
      }).join('')
      $('.box').html(str)

      // 渲染热门新闻
      const article = res.data.data.hot_article
      // console.log(article);
      const strArticle = article.map(item => {
        return `<div class="box-box">
              <div class="info">${item.title}</div>
            </div>`
      }).join('')
      $('#News').html(strArticle)

      getPei(userGender)
      getBar(allCate)
    }

    // 男女饼图
    function getPei(userGender) {
      const myPeiChart = echarts.init(document.querySelector('#Pie'));
      // console.log(userGender);
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '用户来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: userGender.user_woman, name: '女性' },
              { value: userGender.user_man, name: '男性' },
            ]
          }
        ]
      };

      myPeiChart.setOption(option);
    }

    // 分类文章发布数量,柱状图
    function getBar(allCate) {
      const myBarChart = echarts.init(document.querySelector('#Bar'));
      // console.log(allCate);
      option = {
        grid: {
          // left: '3%',
          // right: '4%',
          bottom: '13%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: allCate.map(item => item.catename)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: allCate.map(item => item.num),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      myBarChart.setOption(option);
    }
  </script>

</html>